<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>推荐</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
	html {height: 100%;}
	body {height: 100%;background: #f0f0f0;}
	.login_box {
		height: 100%;
		width: 100%;
		display: table;
	}
	.login {
		width: 100%;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.login_body {
		width: 90%;
		margin: 0 auto;
		padding: 1rem;
		background-color: #fff;
		border-radius: 0.5rem;
		-moz-box-shadow:0px 0.3rem 0.4rem rgba(0,0,0,0.1);
		-webkit-box-shadow:0px 0.3rem 0.4rem rgba(0,0,0,0.1);
		box-shadow:0px 0.3rem 0.4rem rgba(0,0,0,0.1);
		margin-bottom: 1.5rem;
	}
	.input {
		margin-bottom: 1rem;
		position: relative;
	}
	.input .input_img {
		position: absolute;
		width: 2rem;
		height: 2rem;
		top: 0;
		left: 0;
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
	}
	.input_img img {
		width: 0.8rem;
	}
	.login_header {
		font-size: 0.7rem;
		color: #333;
		overflow: hidden;
		margin-bottom: 1.5rem;
	}
	.login_verify {
		float: left;
	}
	.wj_mima {
		float: right;
	}
	.login_but,.register_but {
		background-color: #2997e4;
		font-size: 0.8rem;
		color: #fff;
		padding: 0.5rem 0;
		text-align: center;
		border-radius: 4px;
	}
	.login_but {margin-bottom: 0.5rem;}
	.register_but {color: #333;background-color: #fff;}


	.login_footer {
		width: 80%;
		margin: 0 auto;
	}
	.login_footer h5 {
		color: #999;
		font-size: 0.7rem;
		margin-bottom: 2rem;
	}
	.login_footer h4 {
		color: #999;
		font-size: 0.8rem;
		position: relative;
		width: 7rem;
		margin: 0 auto;
		z-index: 2;
		background-color: #f0f0f0;
	}
	.loginmore {position: relative;margin-bottom: 1rem;}
	.loginmore:after {
		content: '';
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 1px;
		background-color: #999;
		top: 50%;
		left: 0;
		z-index: 1;
	}
	.login_qq_wx img {
		width: 12%;
		margin: 0 8%;
		display: inline-block;
	}

	.input input {height: 2rem;border-radius: 0.2rem;box-sizing: border-box;padding-right: 0.5rem;padding-left: 2rem;font-size: 0.8rem;background-color: #f5f5f5;color: #8E8C8C;width: 100%;}
	.input input::-webkit-input-placeholder {color: #ccc;}
	.input input {outline: none;}
</style>
</head>
<body>

	<div class="login_box" id="app" v-cloak>
		<div class="login">
			<div class="login_body">
				<div class="input">
					<div class="input_img">
						<img src="../../image/zhanghao@3x.png" alt="">
					</div>

					<input type="text" placeholder="请输入手机号码" v-model="account">
				</div>
				<div class="input">
					<div class="input_img">
						<img src="../../image/mima@3x.png" alt="">
					</div>

					<input type="password" placeholder="请输入密码" v-model="password">
				</div>

				<div class="login_header">
					<span class="login_verify" tapmode="presshover" onclick="openNewWindow('login_yz','登录')">验证码登录</span>
					<span class="wj_mima" tapmode="presshover" onclick="openNewWindow('login_wjmm','忘记密码')">忘记密码？</span>
				</div>

				<div class="login_but" @click="Login()">
			    登录
			  </div>
				<div class="register_but" tapmode="presshover" onclick="openNewWindow('login_zc','注册')">
			    注册
			  </div>
			</div>
			<div class="login_footer">
				<h5 tapmode="presshover" @click="Openindex()">随便看看</h5>
				<div class="loginmore">
					<h4>其他登录方式</h4>
				</div>
					<div class="login_qq_wx">
						<img src="../../image/QQ@3x.png" alt="">
						<img src="../../image/weixin@3x.png" alt="">
					</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">

	apiready = function() {
		var URL = 'http://kexiecs.unohacha.com/kexieScore';

		var app = new Vue({
			el: '#app',
			data: {
				account: [],
				password: [],
				token: '',
			},
			created: function() {
				var $_this = this;

			},
			methods: {
				 Login: function() {
					 var $_this = this;
					 if($_this.account == '' || !/^[1][3,4,5,7,8][0-9]{9}$/.test($_this.account)) {
						 api.toast({ msg: '请输入正确的手机号码',duration: 2000,location:'middle' });
	 					return
	 				} else if($_this.password == '') {
						api.toast({ msg: '请输入密码',duration: 2000,location:'middle' });
						 return
					 }
					 api.ajax({
 					  url: URL + '/user/login',
						method: 'post',
				    headers: {
				        'Content-Type': 'application/json'
				    },
						data: {
							body: {
								account: $_this.account,
								password: $_this.password,
								cid: $api.getStorage('gt_cid'),
								equipment:'android'
							}
						},
 						timeout: 300,
 					}, function(ret, err) {
 					    if (ret) {
								// api.alert({ msg: JSON.stringify(ret) });
								if (ret.code == 0) {
									$_this.token = ret.data.token
									// setCookie('token', $_this.token)
									// setCookie('account', $_this.account)
									$api.setStorage('token', $_this.token)
									$api.setStorage('account', $_this.account)
									$_this.password = ''
					 				api.ajax({
					 					url: window.Url.getUsers,
					 					method: 'GET',
					 					headers: {
					 						'baseParams':$_this.token
					 					},
					 					timeout: 300,
					 				}, function(ret, err) {
					 						if (ret) {
					 							$api.setStorage('data', ret.data)
												var data = {
                                userid: ret.data.userid,
                                username: ret.data.nickname,
                                portrait: ret.data.headImg || 'defaultImg'
                            }
												api.ajax({
													 url: window.Url.rongyun_token,
													 data: {
															 body: data
													 },
													 timeout: 300,
													 method: 'post', // 提交类型
													 cache: 'false', // 是否缓存
													 dataType: 'json', // 返回数据     json 或 text
													 headers: {
															 'Content-Type': 'application/json',
													 },
											 }, function(ret, err) {

													 $api.setStorage('rong-token', ret.token);
													//  登录后获取所有未读消息 以及推送消息
													 get_alll_msg()

												 })
					 						} else {
					 								api.alert({ msg: JSON.stringify(err) });
					 						}
					 				})
									$_this.Openindex()
								} else {
									api.alert({ msg: ret.message+"" });
								}
 					    } else {
 					        api.alert({ msg: JSON.stringify(err)+"" });
 					    }
 					})
				},
				Openindex: 	function () {
 					 var $_this = this;
							api.closeWin({
								name: 'index'
							});
							api.execScript({
                    name: 'root',
			            frameName: 'index',
			            script: 'location.reload();'
			        });
						api.openWin({
							reload: true,
							name: 'index',
							pageParam: {
								name: 'index',
								token: $_this.token,
							},
							url: '../../index.html',
							delay: 200,
							bounces: false
						});
						// api.closeToWin({
						// 	reload:true,
						// 		name: 'root',
						// 		pageParam: {
						// 			name: 'root',
						// 			token: $_this.token,
						// 		},
						// 		url: '../../index.html',
						// })
					}
			}
		})
	}



	function openNewWindow(type,title)
  {
    api.openWin({
      name: type,
      url: './forth_header.html',
      pageParam: {name: type,title: title},
      bounces: false,
      delay:200
    });
  }



	// 获取用户未读消息的总数 以及 获取当前用户接受到的推送列表消息总数
	var msg_tz, msg_num = 0,
			tz_num = 0;

	function get_alll_msg() {
			// 判断用户是否登录  已登录获取未读的总消息数  未登录则不获取消息总数
			if (!$api.getStorage('token') || $api.getStorage('token') == "" || $api.getStorage('token') == null || $api.getStorage('token') == 'undefined') {

					var rong = api.require('rongCloud2');
					rong.init(function(ret, err) {
							if (ret.status == 'error')
									api.toast({
											msg: err.code
									});
					});

					rong.connect({
							token: $api.getStorage('ront-token')
					}, function(ret, err) {
							if (ret.status == 'success') {
									rong.getTotalUnreadCount(function(ret, err) {
											// api.toast({
											//     msg: ret.result
											// });
											msg_num = ret.result;
									})
							}
					});

					// 通过接口获取推送的总个数
					api.ajax({
							url: window.Url.getPushList + "/1",
							timeout: 300,
							method: 'get', // 提交类型
							dataType: 'json', // 返回数据     json 或 text
							headers: {
									'Content-Type': 'application/json',
									'baseParams': $api.getStorage('token') //token
							}
					}, function(ret, err) {
							if (ret) {
									// alert(JSON.stringify(ret));
									tz_num = ret.totalcount;
							} else {
									alert(JSON.stringify(err));
							}
					});

					msg_tz = msg_num + tz_num;
					$('.all_num').css('display', 'block');
					$('.all_num').html(msg_tz);
			}
	}

</script>
</html>
